<!-- 医疗器械经营许可证Form表单 -->
<template>
  <div class="medical-device-business-licence-form">
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      @opened='openedDialog'
      width="846px"
    >
      <slot name="header"/>
      <el-form :model="businessFormData" :disabled='edit' :rules="rules" ref="formItem" label-width="160px" class="form-item">
        <el-form-item label="企业名称" prop="companyName">
          <el-input v-model="businessFormData.companyName" placeholder="请输入企业名称" :disabled='true'></el-input>
        </el-form-item>
        <el-form-item label="许可证号" prop="licenceCode">
          <el-input  placeholder="请输入许可证号" @change="changeLicenceCode" v-model="businessFormData.licenceCode"></el-input>
        </el-form-item>
        <el-form-item label="经营方式" prop="businessType">
          <el-select v-model="businessFormData.businessType" placeholder="请选择经营方式">
            <el-option
              v-for="item in businessTypeOptionsList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业负责人" prop="personInCharge">
          <el-input placeholder="请输入企业负责人" v-model="businessFormData.personInCharge"></el-input>
        </el-form-item>
        <el-form-item label="法定代表人" prop="president">
          <el-input placeholder="请输入法定代表人" v-model="businessFormData.president"></el-input>
        </el-form-item>
        <el-form-item label="住所" prop="dwellPlace">
          <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 2}" v-model="businessFormData.dwellPlace"></el-input>
        </el-form-item>
        <el-form-item label="长期有效" prop="effectivenessKey">
          <el-select @change="changeEffectiveness" v-model="businessFormData.effectivenessKey">
            <el-option label="是" :value="1"></el-option>
            <el-option label="否" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期" prop="date">
          <div class="date-ops-corver">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="businessFormData.startDate"
              align="right"
              type="date"
              placeholder="开始日期"
              @change="changeDate"
              :picker-options="pickerOptionsStart">
            </el-date-picker>
            <div class="date-split">
              <span></span>
            </div>
            <el-date-picker
              value-format="yyyy-MM-dd"
              :disabled='!!Boolean(businessFormData.effectivenessKey)'
              v-model="businessFormData.endDate"
              align="right"
              type="date"
              placeholder="结束日期"
              @change="changeDate"
              :picker-options="pickerOptionsEnd">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="经营范围(2002)" prop="scope">
          <el-cascader
            v-model="businessFormData.businessScope2002IdList"
            :options="businessScopeOptions2002List"
            :props="businessScopeProps"
            @change="changeScope"
            clearable
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="经营范围(2017)" prop="scope">
          <el-cascader
            v-model="businessFormData.businessScope2017IdList"
            :options="businessScopeOptions2017List"
            :props="businessScopeProps"
            @change="changeScope"
            clearable
          >
          </el-cascader>
        </el-form-item>
        <el-form-item label="经营场所" prop="businessAddress">
          <el-input placeholder="请输入经营场所" v-model="businessFormData.businessAddress"></el-input>
        </el-form-item>
        <el-form-item label="库房地址" prop="storageAddress">
          <el-input placeholder="请输入库房地址" v-model="businessFormData.storageAddress"></el-input>
        </el-form-item>
        <el-form-item label="医疗器械经营许可证" prop="url">
          <div class="url-corver">
            <licence-img-card
              :imgUrl='businessFormData.url'
              @uploadCb='getUploadUrl'
              :disabled='edit'
            />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="refuseSubmit">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import licenceImgCard from '@/moduleComponents/licence/card/licenceImgCard'
import { getOperationLicenceInfo,treeAcCompany2017BusinessScopeVO,treeAcCompany2002BusinessScopeVO } from '@api/auth_center_v1.js'

import {hasIn} from 'lodash'
export default {
  name: 'medicalDeviceBusinessLicenceForm',
  components: {
    licenceImgCard
  },
  props: {
    form: {
      type: Object,
      default: () => {}
    },
    adminInfoDataForm: {
      type: Object,
      default: () => {}
    },
    edit: {
      default: false,
      type: Boolean
    }
  },
  watch:{
    form:{
      handler(nv,ov) {
        this.businessFormData = {
          ...nv || {},
          scope: []
        }
        if(this.businessFormData) {
          this.changeDate()
          this.changeScope();
        }
      }
    },
    'form.businessScope2002IdList': {
      handler(nv,ov) {
        if(nv) {
          this.businessFormData.businessScope2002IdList = nv
        }
      }
    },
    'form.businessScope2017IdList': {
      handler(nv,ov) {
        if(nv) {
          this.businessFormData.businessScope2017IdList = nv
        }
      }
    },
    'adminInfoDataForm.companyName': {
      handler(nv, ov) {
        this.businessFormData.companyName = nv
      }
    }
  },
  data() {
    return {
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.businessFormData.endDate
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.businessFormData.startDate
          if (beginDateVal) {
            return (
              time.getTime() < new Date(beginDateVal).getTime() ||
              time.getTime() < Date.now() - 8.64e7
            )
          } else {
            return time.getTime() < Date.now()
          }
        }
      },
      companyTypeOpsEnum:{},
      businessTypeOptionsList:[{ label: '批发', value: '0' }, { label: '零售', value: '1' }, { label: '批零兼营', value: '2' }],
      businessScopeOptions2002List:[],
      businessScopeOptions2017List:[],
      businessScopeProps:{expandTrigger: 'hover', value: 'id', label: 'name',children:'nextNodeList', multiple: true},
      businessFormData: {
        companyName: '', // 企业名称
        businessScope2002IdList:[], // 经营范围2002版
        businessScope2017IdList:[], // 经营范围2017版
        licenceCode:'', // 许可证号
        businessType:'', // 经营方式
        personInCharge:'', // 企业负责人
        president:'', // 法定代表人
        dwellPlace:'', // 住所
        effectivenessKey:'', // 是否长期有效
        startDate:'', // 有效期起始日期
        endDate:'', // 有效期截止日期
        date: '', // 有效期 前端自己用
        scope:'', // 经营范围 前端自己用
        businessAddress:'', // 经营场所
        storageAddress:'', // 库房地址 
        url:'' // 证件图片地址
      },
      rules: {
        businessType: [
          { required: true, message: '请输入经营方式', trigger: 'change' },
        ],
        personInCharge: [
          { required: true, message: '请输入企业负责人', trigger: 'blur' },
        ],
        president: [
          { required: true, message: '请输入法定代表人', trigger: 'blur' },
        ],
        businessAddress: [
          { required: true, message: '请输入经营场所', trigger: 'blur' },
        ],
        dwellPlace: [
          { required: true, message: '请输入住所', trigger: 'blur' },
        ],
        storageAddress: [
          { required: true, message: '请输入库房地址', trigger: 'blur' },
        ],

        companyName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' },
        ],
        licenceCode: [
          { required: true, message: '请输入许可证号', trigger: 'blur' },
        ],
        effectivenessKey: [
          { required: true, message: '请选择是否长期有效', trigger: 'change' },
        ],
        date: [
          { required: true, message: '请选择有效期', trigger: 'change' },
        ],
        scope: [
          { required: true, message: '经营范围必填其一', trigger: 'change' },
        ],
        url: [
          { required: true, message: '请上传证照图片', trigger: 'change' },
        ]
      }
    }
  },
  methods:{
    changeLicenceCode() {
      if(!this.businessFormData.licenceCode) return
      this.$axios({
        method: 'get',
        url: `${getOperationLicenceInfo}/${this.businessFormData.licenceCode}`,
      }).then(res => {
        let result = res.data.payload
        this.contrastDataToSet(result);
        this.changeDate()
        this.changeScope()
      })
    },
        contrastDataToSet(result) {
      let flag = result.companyName === this.businessFormData.companyName
      if(flag) {
        this.businessFormData.companyName = result.companyName
        this.businessFormData.licenceCode = result.licenceCode
        this.businessFormData.businessType = result.businessType
        this.businessFormData.personInCharge = result.personInCharge
        this.businessFormData.president = result.president
        this.businessFormData.startDate = result.startDate
        this.businessFormData.dwellPlace = result.companyAddress
        this.businessFormData.endDate = result.endDate
        this.businessFormData.effectivenessKey = result.endDate ? 0 : 1
        this.businessFormData.businessAddress = result.businessAddress
        this.businessFormData.storageAddress = result.storageAddress
      }
    },
    // 打开的时候请求
    openedDialog() {
      if(this.adminInfoDataForm.companyName !== this.businessFormData.companyName) {
        this.businessFormData.companyName = this.adminInfoDataForm.companyName
      }
      this.getBusinessScope2002();
      this.getBusinessScope2017();
    },
    getBusinessScope2002() {
      this.$axios({
        url: treeAcCompany2002BusinessScopeVO,
        method: 'get'
      }).then(res => {
        let option = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        this.businessScopeOptions2002List = option
      })
    },
    getBusinessScope2017() {
       this.$axios({
        url: treeAcCompany2017BusinessScopeVO,
        method: 'get',
      }).then(res => {
        let option = hasIn(res, ['data', 'payload']) ? res.data.payload : []
        this.businessScopeOptions2017List = option
      })
    },
    changeEffectiveness() {
      if(!!this.businessFormData.effectivenessKey) {
        this.businessFormData.endDate = ''
      }
      // 重新为date赋值
      this.changeDate()
    },
    changeDate() {
      // 非长期有效模式
      if((!this.businessFormData.startDate || !this.businessFormData.endDate) && !this.businessFormData.effectivenessKey){
        this.businessFormData.date = ''
        return
      }
      // 长期有效模式
      if(!this.businessFormData.startDate && this.businessFormData.effectivenessKey) {
        this.businessFormData.date = ''
        return
      }
      this.businessFormData.date = (this.businessFormData.startDate || '') + '' + (this.businessFormData.endDate || '')
    },
    changeScope() {
      this.businessFormData.scope = (this.businessFormData.businessScope2002IdList || []).concat(this.businessFormData.businessScope2017IdList || [])
    },
    getUploadUrl(data) {
      this.businessFormData.url = data.payload
      this.$refs.formItem.validateField('url', (callback)=> {
        console.log('callback', callback)
      }) 
    },
    refuseSubmit() {
      this.$emit('refuse')
    },
    confirmSubmit() {
      console.log(this.businessFormData.scope)
      this.$refs['formItem'].validate((valid) => {
        if (valid) {
          this.$emit('submit', this.businessFormData)
        } else {
          return false;
        }
      });
    }
  }
}
</script>
<style lang="less">
.medical-device-business-licence-form {
  .el-dialog__body{
    padding: 0;
  }
  .el-input__inner, .el-textarea__inner{
    width: 330px;
  }
  .el-textarea__inner{
    min-height: 54px;
    max-height: 54px;
    height: 54px;
  }
  .el-date-editor.el-input{
    width: 144px;
  }
  .date-ops-corver{
    .el-input__inner, .el-textarea__inner{
      width: 144px;
    }
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    .date-split{
      width: 42px;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        display: inline-block;
        font-size: 0;
        width: 20px;
        border-top: 1px solid #ccc;        
      }
    }
  }
  .url-corver{
    width: 330px;
    height: auto;
  }
  .dialog-class-name {
    padding-bottom: 20px;
    font-size: 14px;
    color: #E63937;
  }
  .form-item{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}
</style>
